<template>
  <b-row class="py-2 mb-2">
    <b-col class="pr-2 col-auto onHover" align-self="center" @click="toUserPage(user.id)">
      <b-img-lazy blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" class="bg-white border" rounded="circle" height="50"
        width="50" :src="user.headUrl" />
    </b-col>
    <b-col>
      <b-row>
        <b-col class="px-0 col-auto">
          <b-link @click="toUserPage(user.id)" class="ml-1 text-nowarp text-decoration-none text-dark"
            style="font-size:18px;font-family:HYZhengYuan-85S;">{{user.name}}</b-link>
        </b-col>
        <b-col v-if="type == 1" class="pl-1">
          <b-badge style="font-size:13px">Lv{{user.level}}</b-badge>
        </b-col>
      </b-row>
      <b-row v-if="type == 1">
        <b-col class="pl-0">
          <b-badge class="ml-1" v-show="isFriend" variant="danger" style="font-size:13px">朋 友</b-badge>
          <b-badge class="ml-1" v-show="isFollow && !isFriend" variant="info" style="font-size:13px">关 注</b-badge>
        </b-col>
      </b-row>
      <b-row v-else>
        <b-col class="pl-0">
          <b-badge class="ml-1" style="font-size:13px">Lv{{user.level}}</b-badge>
          <b-badge class="ml-1" v-show="isFriend" variant="danger" style="font-size:13px">朋 友</b-badge>
        </b-col>
      </b-row>
    </b-col>
    <b-col class="text-right">
      <b-btn @click="toFollow" v-show="type == 2 && user.id!=uid" :variant="isFollow?'secondary':'primary'">{{isFollow?'已关注':'关 注'}}</b-btn>
      <span v-if="type!=2" class="text-muted ml-1" style="font-size:15px">{{getTime(time)}}</span>
    </b-col>
  </b-row>
</template>

<script>
import tool from '@/utils/tool';
export default {
  // type-> 1为首页动态列表类型 2为文章或动态详情类型
  props: {
    user: Object,
    time: [Object, String],
    type: Number,
  },
  data() {
    return {
      //控制关注按钮的状态
      isFollow: false,
      //控制是否是朋友的徽章状态
      isFriend: false,
      uid: null,
    }
  },
  created() {
    //查询是否关注
    this.isFollowInfo();
    //查询登录用户
    this.$httpUser.isUserLogin().then((res) => {
      this.uid = res
      // console.log(res, this.user.id);
    }).catch((err) => {
      console.log(err);
    });
  },
  methods: {
    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },
    //跳转到用户主页
    toUserPage() {
      this.$pageRedirect.toPersonPage(this.user.id, 1);
    },
    //查询是否关注
    isFollowInfo() {
      this.$httpUser.isFollow(this.user.id).then((res) => {
        this.isFollow = res == "1" ? true : false;
        if (res == "1") {
          this.$httpUser.isFriend(this.user.id).then((res) => {
            if (res == "1") {
              this.isFriend = true;
            }
          })
        } else {
          this.isFriend = false;
        }
      })
    },
    //进行关注操作
    toFollow() {
      this.$httpUser.toFollow(this.user.id, "user").then((res) => {
        console.log('关注操作:', res);
        if (res == "1") {
          this.isFollowInfo();
        }
      })
    },
  },
}
</script>

<style>
.btn:focus {
  outline: none;
  box-shadow: none;
}
.onHover:hover {
  cursor: pointer;
}
</style>